<template lang="pug">
  div.module
    div.static-row
      div.static-card(v-for="(item, index) in medicalData" :key="index")
        StaticCompareView(:itemData="item" :suffix="item.suffix" :valueColor="item.valueColor")
</template>

<script>
export default {
  name: "ModuleMedicalData",
  data() {
    return {
      medicalData: [
        {
          label: '农林牧渔业总产值',
          value: 25.54,
          valueColor: '#FFFFFF',
          decimals: 2,
          suffix: '亿元',
          compare: {
            label: '2025计划产值',
            value: 40,
          }
        },
        {
          label: '农业',
          value: 13.6,
          valueColor: '#05FDBB',
          decimals: 1,
          suffix: '亿元',
          compare: {
            label: '2025目标',
            value: 17.8,
          }
        },
        {
          label: '林业',
          value: 1.76,
          valueColor: '#05FDBB',
          decimals: 2,
          suffix: '亿元',
          compare: {
            label: '2025目标',
            value: 8,
          }
        },
        {
          label: '畜牧业',
          value: 8.54,
          valueColor: '#05FDBB',
          decimals: 2,
          suffix: '亿元',
          compare: {
            label: '2025目标',
            value: 12,
          }
        },
        {
          label: '渔业',
          value: 0.11,
          valueColor: '#05FDBB',
          decimals: 2,
          suffix: '亿元',
          compare: {
            label: '2025目标',
            value: 0.2,
          }
        },
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.static-row{
  display: flex;
  justify-content: center;
  padding-top: rem(40);
  .static-card{
    margin: 0 rem(14);
    padding: rem(24) rem(30);
    position: relative;
    /* Google Chrome */
    backdrop-filter: blur(5px);
    background: rgba(0, 73, 104, 0.26);
    min-width: rem(180);
    box-sizing: border-box;
    &:before,
    &:after{
      content: '';
      display: block;
      @include size(rem(6), rem(8));
      position: absolute;
      right: rem(10);
    }
    &:before{
      top: rem(10);
      border-top: rem(1) solid #05FDBB;
      border-right: rem(1) solid #05FDBB;
    }
    &:after{
      bottom: rem(10);
      border-bottom: rem(1) solid #05FDBB;
      border-right: rem(1) solid #05FDBB;
    }
  }
}
</style>
